<template>
	<view class="uni_box">
		<image class="bghome" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" />
		<view class="newcontent">
			<view class="jli"  :style="{paddingTop: titleTop + 'px'}">
				<view class="xiao">
					<text class="jname">订单中心</text>
				</view>
			</view>
			<view class="tab">
				<u-tabs :list="tablist" bg-color="none" :is-scroll="true" :current="current" @change="change" active-color="#FF8F39" inactive-color="#999999"></u-tabs>
			</view>
			<view class="list">
				<view class="lblist"  v-for="(item,index) in list" :key="index" @click.stop="getorder(item)">
					<view class="lbone">
						<text class="lbtime">{{item.time}}</text>
					</view>
					<view class="litem">
						<view class="itwo">
							<view class="tname">
								<text class="name">{{item.title}}</text>
								<text class="shi" :class="item.settlement==2?'lvtxt':''"><text class="shitime">{{ item.price }}</text>元/{{ item.settlement==1?'计时':'计件' }}</text>
							</view>
							<view class="bqitem">
								<view class="sc chengse">
									{{ item.tip }}
								</view>
								<text class="rimiao">{{ item.des}}</text>
							</view>
							<view class="bitems">
								<view class="bannav">
									<text class="bname">{{ item.show_nums }}</text>
									<text class="bniao">查看人数</text>
								</view>
								<view class="bannav">
									<text class="bname">{{item.baoming_nums}}</text>
									<text class="bniao">报名人数</text>
								</view>
								<view class="bannav">
									<text class="bname">{{ item.jiedan_nums }}</text>
									<text class="bniao">已接单</text>
								</view>
							</view>
							<view class="bm">
								<image class="img_ywc" v-if="item.status == 2" src="/static/admin/img_ywc.png" />
								
								<view class="bmrightnav">
									<!-- <view class="bmitems" v-if="item.status == 1">取消招工</view>
									<view class="bmitems">收藏模版</view>
									<view class="bmitems que">再来一单</view> -->
									<view class="bmitems" :style="{background: i.button_color,color:i.font_color}"  v-for="(i,ind) in item.button" @click.stop="getobtn(i,item)">{{ i.button_text }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" @loadmore="loadmore" v-if="list !=''" /> 
				<u-empty text="暂无数据" mode="list" v-if="list ==''"></u-empty>
				

			</view>
			<!-- <view class="kaigongma">
				<text class="kainame">开工码</text>
				<text class="kainum">7197</text>
			</view> -->
		</view>
		<JiaPriceOrder :jiapricepop="jiapricepop" :popid="popid" @closejiaprice=closejiaprice @temClickjiaprice="temClickjiaprice"></JiaPriceOrder>
</view>
</template>

<script>
import JiaPriceOrder from '@/pages/tabbar/components/JiaPriceOrder/JiaPriceOrder'
export default {
	name: 'AOrder',
	components: {
		JiaPriceOrder
	},
	props: {
		aordernum:{
			type:Number/String
		}

	},
	watch: {
		aordernum:{
			handler(val, oldval) {
				if(this.aordernum!=0){
					this.getClear()
				}
				
			},
			immediate: false,
			deep: true
		},
	},
	data() {
		return {
			tablist: [{
				name: '进行中'
			}, {
				name: '已完成'
			}, {
				name: '已取消'
			}],
			current: 0,
			noticlist: [
				'寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴',
				'平明送客楚山孤',
				'洛阳亲友如相问',
				'一片冰心在玉壶'
			],
			border: false,
			keyword: '',
			enable:false,
			Captop:0,
			offTop:0,
			shaishow:false,
			loginshow:false,
			userinfo:{
				mobile: "",
				token: "bb22423a-be41-4419-a812-5778737759b9"
			},
			seeion_key:'',

			list: [],
			page: 1,
			limit: 10,
			last_page: 1,
			status: "loadmore",
			keywords:'',
			backgroundColor:'none',
			titleTop: 0,
 			statusBarHeight: 0,
			 jiapricepop:false,
			 popid:'',

		}
	},
	
	computed: {
	},

	mounted() {
		// #ifdef MP-WEIXIN
		let that = this;
		// 获取胶囊按钮位置信息
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		const { top, height } = menuButtonInfo;
		const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

		// 计算标题需要偏移的位置
		const titleTop = top + (height - statusBarHeight) / 2;
		this.titleTop = titleTop;//设置标题顶部距离
		this.statusBarHeight = statusBarHeight;//设置状态栏高度
		// #endif
		// this.getList()
		this.gethead()
	},
	async onLoad() {
		

	},
	async onShow() {
		// if(!uni.getStorageSync('token')){
		// 	// this.loginshow = true
		// 	// #ifdef MP
		// 	this.getLogin()
		// 	// #endif
		// 	// #ifdef H5
		// 	uni.setStorageSync('token',this.userinfo.token)
		// 	// uni.setStorageSync('userid',this.userinfo.user_id)
		// 	// #endif
			
			
		// 	this.getInit()
		// }else{
		// 	this.getInit()
		// }
		
	},
	onReachBottom: function () {
		this.loadmore();
	},
	methods: {
		async gethead(){
			let res = await this.$u.api.agetCate({
			});
			let data = res.data
			this.tablist = data
			// this.current = 0
			this.getList()
		},
		change(e){
			this.current = e
			this.getClear()
		},
		getorder(item){
			this.navrouter("/pages_admin/twoPage/OrderDetail?id="+item.id);
		},
		async getList(){//列表数据
			let res = await this.$u.api.agetList({
			  limit:this.limit,
			  page:this.page,
			  type:this.tablist[Number(this.current)].value
			});
			let list = res.list;
			this.list = this.page == 1 ? list : [...this.list, ...list];	
			if(res.list==''||Number(list.length)<Number(this.limit)){
				this.status = 'nomore';
			}
		},
		loadmore() {
			let page = this.page;
			// let last_page = this.last_page;
			if (this.status == 'loadmore') {
				this.page++;
				this.getList();
			}
		},
		getClear(){
			this.list = []
			this.page = 1,
			this.status= "loadmore"
			this.getList()
		},
		getobtn(e,item){
			let button_type = e.button_type;//jgj加工价 stop暂停招工 cancel取消招工 again再来一单 template添加模版

			if(button_type == 'jgj'){
				this.popid = item.id
				this.jiapricepop = true
			}else if(button_type == 'template'){
				this.gettemplate(item)
			}else if(button_type =='again'){
				this.navrouter("/pages_admin/twoPage/FabuJob?temid="+item.id);
			}else if(button_type =='cancel'){
				//退出登陆
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定取消招工？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					// showCancel: false, // 是否显示取消按钮，默认为 true
					// confirmColor: '#f55850',
					// cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) {  
						that.getquxiao(item)
					} else {  
						console.log('cancel') //点击取消之后执行的代码
						}  
					} 
				})
			}else if(button_type =='edit'){
				this.navrouter("/pages_admin/twoPage/FabuJobEdit?temid="+item.id+'&type=edit');
			}
		},
		async getquxiao(item){
			
			let res = await this.$u.api.cancelTask({
				id:item.id
			});
			this.$u.toast("取消成功");
			this.getClear()
		},
		async gettemplate(item){
			let res = await this.$u.api.addTemplate({
				task_id:item.id
			});
			this.$u.toast("添加成功");
		},
		closejiaprice(){
			this.jiapricepop = false
		},
		temClickjiaprice(){
			this.closejiaprice()
			this.getClear()
		}

	}
}
</script>

<style lang="scss" scoped>
page,
html {
	background-color: rgba(246, 247, 249, 1);
}

/deep/ .u-sticky {
	z-index: 1007500000 !important;
}

.gllogo {
	width: 237rpx;
	height: 67rpx;
}
.bghome{
	width: 100%;
	position: absolute;
	top: 0;
	height: 550rpx;
	
}

.hleft {
	position: absolute;
	left: 30rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	.icon_dw{
		width: 32rpx;
		height: 32rpx;
	}
	.icon_sx{
		margin-left: 14rpx;
		width: 24rpx;
		height: 24rpx;
	}
	.adname{
		font-weight: 500;
		font-size: 28rpx;
		color: #111111;
		display: block;
		max-width: 400rpx;
		margin-left: 8rpx;
	}
}

.ptong {
	padding-left: 20rpx;
	padding-right: 20rpx;
}
.jli{
	position: relative;
	.jname{
		font-weight: 800;
		font-size: 45rpx;
		color: #111111;
		padding-top: 20rpx;
		display: flex;
		margin-bottom: 30rpx;
	}
	.icon_qcxx{
		margin-left: 20rpx;
		width: 44rpx;
		height: 44rpx;
	}
	.xone{
		display: flex;
		margin-bottom: 30rpx;
		align-items: center;
	}
	.yaojl{
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;;
	}
	.yitwo{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20rpx;
		.yileft{
			width: 48%;
			height: 78rpx;
			background: linear-gradient(34deg, #DC5585, #FD79AA);
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;

		}
		.xitong{
			background: linear-gradient(34deg, #3A76D7, #5E98E8);
		}
		.icon_tz{
			width: 44rpx;
			height: 44rpx;
			margin-right: 5rpx;
		}
	}
	.xiao{
		position: relative;
		padding: 0rpx 30rpx 20rpx;
	}
}

.newcontent {
	padding: 0rpx 0 88rpx;
	position: relative;

	display: flex;
	flex-direction: column;
	position: relative;
	// #ifdef MP-WEIXIN
	padding-bottom: 10rpx;
	// #endif
	.hone{
		display: flex;
		flex-direction: column;
		padding: 20rpx 35rpx 10rpx;
		.hbiao{
			display: flex;
			flex-direction: row;
			align-items: center;
			.bleft{
				display: flex;
				flex-direction: column;
				width: 60%;
				.bt{
					font-weight: bold;
					font-size: 56rpx;
					color: #111111;
				}
				.btmiao{
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;
					display: block;
					margin: 15rpx 0 20rpx;
				}
				.bqian{
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 100%;
					justify-content: space-between;
					.qians{
						display: flex;
						flex-direction: row;
						align-items: center;
						
						.qiansicon{
							width: 24rpx;
							height: 24rpx;
							margin-right: 6rpx;
						}
						.qname{
							font-weight: 500;
							font-size: 24rpx;
							color: #FF823F;
						}
					}
				}
			}
			.img_zs{
				margin-left: auto;
				width: 179rpx;
				height: 158rpx;
			}
		}
	    .hling{
			display: flex;
			flex-direction: row;
			margin-top: 30rpx;
			.linitemone{
				width: 335rpx;
				height: 160rpx;
				position: relative;
				.img_bjone{
					position: absolute;
					width: 100%;
					height: 100%;
				}
				.items{
					position: relative;
					display: flex;
					flex-direction: column;
					padding: 30rpx;
					.lname{
						font-weight: 800;
						font-size: 28rpx;
						color: #FFFFFF;
					}
					.jiename{
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
						display: block;
						margin-top: 10rpx;
					}
				}
			}
			.linitemtwo{
				width: auto;
				flex: 1;
				// margin: 0 8rpx;
				margin-left: 18rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				
				.items{
					padding: 20rpx;
					width: 100%;
					height: 100%;
					position: relative;
					.lname{
						font-weight: 800;
						font-size: 26rpx;
						color: #333333;
					}
					.jiename{
						font-weight: 500;
						font-size: 20rpx;
						color: #999999;
						margin-top: 7rpx;
					}
					.img_gw{
						position: absolute;
						width: 75rpx;
						height: 75rpx;
						right: 0;
						bottom: 0;
					}
				}
			}
		}
	}
	.notic {
		margin: 20rpx 20rpx;
		padding: 4rpx 30rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.icon_gg {
			width: 30rpx;
			height: 30rpx;
			display: inline-block;
		}

		.noticright {
			width: 85%;
		}
		.gongshi{
			width: 130rpx;
			height: 40rpx;
			background: #FFEFE9;
			border-radius: 20rpx;
			margin-left: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 20rpx;
			color: #EA5918;
		}
	}
	.list{
		// background: linear-gradient(180deg, #FFFFFF, #F6F7F9);
		// border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 20rpx 30rpx 30rpx;
		min-height: 60vh;
		.souitem{
			display: flex;
			flex-direction: row;
			margin-bottom: 30rpx;
			.souleft{
				display: flex;
				width: 50%;
				.shua{
					position: relative;
					margin-right: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding-bottom: 10rpx;
					.huaname{
						font-weight: 500;
						font-size: 32rpx;
						color: #999999;
					}
					.huabot{
						width: 60%;
						left: 20%;
						position: absolute;
						width: 48rpx;
						height: 6rpx;
						background: linear-gradient(90deg, #FF8F39, #FF4D43);
						bottom: 0;
						display: none;
						
					}
				}
				.sactive{
					.huaname{
						font-weight: bold;
						font-size: 36rpx;
						color: #111111;
					}
					.huabot{
						display: inline-block;
					}
				}
			}
			.shainame{
				margin-left: auto;
				display: flex;
				flex-direction: row;
				padding: 8rpx 20rpx;
				background: #EEEEEE;
				border-radius: 29rpx;
				align-items: center;
				.icon_xz{
					margin-left: 6rpx;
					width: 24rpx;
					height: 24rpx;
				}
				.icoN_ss{
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
			}
		}
		.lblist{
			.lbone{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 20rpx;
				.lbtime{
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
				}
			}
		}
		.litem{
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 40rpx 0rpx #EEEEEE;
			border-radius: 30rpx;
			margin-bottom: 24rpx;
			.ione{
				// height: 60rpx;
				background: rgba(233, 255, 235, 1);
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				display: flex;
				flex-direction: row;
				padding: 10rpx 30rpx;
				align-items: center;
				.riqi{
					font-weight: bold;
					font-size: 25rpx;
					color: #16B925;
				}
				.qitime{
					font-weight: 400;
					font-size: 26rpx;
					color: #EA5918;
					display: inline-block;
					margin-left: 10rpx;
				}
			}
			
			.itwo{
				padding: 30rpx;
				display: flex;
				flex-direction: column;
			}
			.tname{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 15rpx;
			}
			.shi{
				margin-left: auto;
				font-weight: bold;
				font-size: 28rpx;
				color: #FF5F40;
				.shitime{
					font-size: 40rpx;
					position: relative;
					margin-right: 4rpx;
					top: 3rpx;
				}
			}
			.lvtxt{
				color: #16B925;
			}
			.name{
				font-weight: bold;
				font-size: 40rpx;
				color: #111111;
				
				display: block;
			}
			.sc{
				display: flex;
				padding: 4rpx 20rpx;
				flex-direction: row;
				align-items: center;
				border-radius: 6rpx;
				font-weight: 500;
				font-size: 24rpx;
				margin-right: 15rpx;
				background-color: rgba(245, 245, 245, 1);
				color: #999999;
				.icon_bz{
					width: 24rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}
				.rimiao{
					margin-left: 10rpx;
					display: inline-block;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
				}
			}
			.bqitem{
				display: flex;
				flex-direction: row;
			}
			.lv{
				background-color: rgba(233, 255, 235, 1);
				color: #16B925;
			}
			.chengse{
				background-color: rgba(255, 238, 231, 1);
				color: rgba(255, 95, 64, 1);
			}
			.bitems{
				background: #F5F5F5;
				border-radius: 20rpx;
				padding: 30rpx 15rpx;
				display: flex;
				flex-direction: row;
				margin-top: 30rpx;
				.bannav{
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border-right: 1rpx solid #CCCCCC;
					.bname{
						font-weight: bold;
						font-size: 36rpx;
						color: #111111;
					}
					.bniao{
						font-weight: 400;
						font-size: 24rpx;
						color: #111111;
						display: block;
						margin-top: 10rpx;
					}
				}
				.bannav:last-child{
					border-right: none;
				}
			}
			.bm{
				display: flex;
				flex-direction: row;
				margin-top:30rpx;
				align-items: center;
				position: relative;
				.img_ywc{
					width: 110rpx;
					height: 110rpx;
					position: absolute;
					left: 30rpx;
					top: -30rpx;
				}
				.img_tx{
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
				.gname{
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
				}
				.xb{
					width: 30rpx;
					height: 30rpx;
					background: #DFFAFF;
					border-radius: 6rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 20rpx;
					color: #3EABFF;
					margin-left: 10rpx;
				}

				.bmleft{
					font-weight: 800;
					font-size: 44rpx;
					color: #EA5918;
				}
				.danwei{
					font-weight: bold;
					font-size: 24rpx;
					color: #EA5918;
				}
			}
			.bmright{
				margin-left: auto;
				width: 160rpx;
				height: 68rpx;
				background: linear-gradient(90deg, #FF8F39, #FF4D43);
				border-radius: 34rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				.img_an{
					position: absolute;
					width: 100%;
					height: 100%;

				}
				.bmitem{
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.quxiao{

				}
			}
			.bmrightnav{
				margin-left: auto;
				display: flex;
				flex-direction: row;
				.bmitems{
					padding: 15rpx 15rpx;
					background: #F5F5F5;
					border-radius: 34rpx;
					font-weight: bold;
					font-size: 25rpx;
					color: #000;
					margin-left: 20rpx;
				}
				.que{
					background: linear-gradient(90deg, #FF8F39, #FF4D43);
					color: #fff;
				}
			}
		}
	}
	
	.jiview{
		margin: 20rpx 0;
		display: flex;
		flex-direction: column;
		.jiitem{
			margin-bottom: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.jiname{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
			.jival{
				font-weight: bold;
				font-size: 24rpx;
				color: #111111;
				display: inline-block;
				margin-left: 20rpx;
			}
		}
	}

	.fenlei {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.fenitem {
			flex: 1;
			max-width: 25%;
			margin: 0 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.navimg {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}

			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}

		.fenitem:first-child {
			margin-left: 0;
		}

		.fenitem:last-child {
			margin-right: 0;
		}
	}

	.tuilist {
		display: flex;
		margin: 0rpx 0 0rpx;
		background-color: #fff;
		padding: 40rpx 0 20rpx;
		.tuiview {
			width: 100%;
			white-space: nowrap;

			.tuiitem {
				display: inline-block;
				// margin-right: 50rpx;
				position: relative;
				padding-bottom: 14rpx;
				width: 100rpx;
				text-align: center;

				.tuiname {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}

				.xuans {
					width: 50%;
					position: absolute;
					left: 25%;
					bottom: 0;
					height: 14rpx;
					display: none;
				}
			}

			.tactive {
				.tuiname {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: $Themecolor;
				}

				.xuans {
					display: inline-block;
				}
			}

		}
	}

	.souview {
		margin: 0 0 0rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		// height: 90rpx;
		padding: 0rpx 20rpx 20rpx;

		.souleft {
			width: 80%;
			border: 1rpx solid #CCCCCC;
			border-radius: 10rpx;
			height: 60rpx;
			padding: 0rpx 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.icon_sousuo {
				width: 24rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}
		}

		.shaixuan {
			margin-left: auto;
			width: 100rpx;
			height: 60rpx;
			background: #EEEEEE;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.icon_ss {
				width: 12rpx;
				height: 12rpx;
				margin-left: 15rpx;
			}

			text {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #51565D;
			}
		}
	}

	.hlist {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.hitem {
			width: 48%;
			min-height: 400rpx;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx 20rpx;
			margin-bottom: 30rpx;
			box-shadow: 0rpx 4rpx 6rpx 1rpx rgba(107, 107, 107, 0.07);

			.hone {
				width: 100%;
				height: 330rpx;
				border-radius: 20rpx 20rpx 0 0;

				.listimg {
					width: 100%;
					height: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}

			}

			.htwo {
				padding: 15rpx 15rpx 25rpx;

				.hname {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; //溢出内容隐藏
					text-overflow: ellipsis; //文本溢出部分用省略号表示
					display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 2; //行数
					line-clamp: 2;
					-webkit-box-orient: vertical; //盒子中内容竖直排列

				}

				.hmiao {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					display: block;
					margin-top: 8rpx;
				}
			}
		}

		.hitem:nth-child(even) {
			margin-left: auto;
		}
	}
}

.kaigongma{
   position: fixed;
   right: 0;
   bottom: 20%;
   padding:15rpx 25rpx;
   background: #FF5F40;
	border-radius: 16rpx;
	// border: 4px solid #F5F5F5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 100;
	.kainame{
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.kainum{
		font-weight: 800;
		font-size: 32rpx;
		color: #FFFFFF;
		display: block;
		margin-top: 5rpx;
	}
}

.txt {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.immerse {
	width: 100%;
	height: calc(var(--status-bar-height) + env(safe-area-inset-top));
	background-color: #fff;
	// #ifdef APP-PLUS
	height: calc(var(--status-bar-height);
			// #endif
			z-index: 1007500000;
			position: relative;
	}</style>
